.code-popup-no-backref .footnote-backref {
  display: none;
}

.code-popup-display-none {
  display: none;
}

.code-popup-hover {
  visibility: visible;
  opacity: 1;
  top: calc(100% + 10px);
  transition: visibility 0s, opacity 0.2s ease-in;
}

.code-popup-hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 0.5s ease-out;
}

.code-popup-warp {
  position: absolute;
  display: inline-block;
  top: 150%;
  font-size: 16px;
}

.code-popup {
  z-index: 3;
  border-radius: 10px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: var(--content-width);
  // max-width: 90%;
  padding: 2px 15px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

  // $pc
  // $laptop
  // $pad
  // $tablet
  // $mobile

  @media (min-width: hope-config.$mobile) {
    width: calc(100% - 10px);
  }

  @media (max-width: hope-config.$mobile) {
    width: calc(100%);
    left: 55%;
  }
}

// li > .code-popup {
//   top: 10%;
// }

ol.footnotes-list-popup {
  list-style: none;
}

.footnote-ref-popup-source a {
  color: #096dd9;
  animation: color-transition 1.5s linear infinite;
  display: inline-block;
  background-color: unset !important;
}

@keyframes color-transition {
  0% {
    color: #84b9df;
  }

  10% {
    color: #6ba1d6;
  }

  20% {
    color: #4e89cc;
  }

  30% {
    color: #3161c2;
  }

  40% {
    color: #2167FF;
  }

  50% {
    color: #2167FF;
  }

  60% {
    color: #3161c2;
  }

  70% {
    color: #4e89cc;
  }

  80% {
    color: #6ba1d6;
  }

  90% {
    color: #84b9df;
  }

  100% {
    color: #84b9df;
  }

}
